<template>
    <div id="codeLogin">
        <!-- 头部 -->
        <my-header fixed title=''>
            <a class="close-black" slot='right' @click='$router.go(-1)'></a>
        </my-header>
        <!-- 正文 -->
        <div class="content" :class="{isIOS: $store.state.device == 'ios'}">
            <div class="container">
                <div class="wrapper">
                    <div class="defaultTip">
                        <span>手机验证码登陆</span>
                    </div>
                    <ul class="formlist">
                        <li>
                            <div class="formlist-li">
                                <input type="number" v-model='codeTel'  placeholder="手机号码">
                                <div class="formlist-btn" @click.stop='smsLogin'>
                                    {{sendSms}}
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="formlist-li">
                                <input type="number" v-model='smsLog' placeholder="请输入验证码">
                            </div>
                        </li>
                    </ul>
                    <ul class="btnList">
                        <li>
                            <button class="app-btn app-btn-login" @click.stop='login'>
                                登录
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapMutations, mapActions } from 'vuex'
import { get_iosLocation, get_androidLocation } from '@/config/cordova'
import { set_local_cache } from '@/config/cache'
export default {
    name: 'codeLogin',
    data() {
        return {
            GPSLocation: {},
            sendSms: '发送验证码',
            codeTel: '',
            smsLog: null
        }
    },
    methods: {
        ...mapMutations([
            'set_userid'
        ]),
        ...mapMutations('login', [
            'set_isLogin'
        ]),
        ...mapMutations('user', [
            'set_userInfo'
        ]),
        ...mapActions('login', [
            'get_userPower_data'
        ]),
        ...mapActions('login', [
            'get_smsLogin_data'
        ]),
        ...mapActions('login', [
            'get_codeLogin_data'
        ]),
        get_location() {
            if (this.$store.state.device === 'ios') {
                var res = get_iosLocation()
                this.GPSLocation = res.coords
                 console.log('IOS定位', this.GPSLocation)
            } else {
                this.GPSLocation = get_androidLocation()
                 console.log('安卓定位', this.GPSLocation)
            }
        },
        // 提交登录验证码数据
        smsLogin() {
            let params = {
                'mobile': this.codeTel
            }
            console.log(params)
            this.get_smsLogin_data(params)
            .then(res => {
                if (res.code === 0) {
                  let c = res.data
                  const that = this
                  let intervalId = window.setInterval(function () {
                    c = c - 1
                    that.sendSms = c + 's后重发'
                    if (c === 0) {
                      window.clearInterval(intervalId)
                      that.sendSms = '获取验证码'
                    }
                  }, 1000)
                  this.$toast({ message: res.msg, duration: 1500 })
                } else {
                  this.$toast({ message: res.msg, duration: 1500 })
                }
            })
        },
        // 提交登录数据
        login() {
          let params = {
              'mobile': this.codeTel,
              'verify_code': this.smsLog
          }
          this.get_codeLogin_data(params)
          .then(res => {
            console.log(res)
              if (res.code === 0) {
                const that = this
                that.set_isLogin('success')        // 设置登录
                const token = res.data.token
                set_local_cache('token', token)
                that.$router.push({name: 'user'})
                this.$toast({ message: res.msg, duration: 1500 })
              } else {
                this.$toast({ message: res.msg, duration: 1500 })
              }
          })
        }
    },
    mounted() {
        // this.get_location()
    }
}
</script>
<style lang='stylus'>
#codeLogin{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .myHeader.fixed{
        background : none;
        border: none;
    }
    .container{
      background: none;
    }
    .wrapper{
        position: absolute;
        width: 100%;
        top: 45%;
        transform: translateY(-50%);
        .formlist{
            margin-top: 50px;
            li{
                .formlist-li{
                    width : 80%;
                    margin : 0 auto;
                    font-size:14px;
                    margin-bottom: 20px;
                    position relative;
                    input{
                        height : 40px;
                        border: solid 1px #a7a7a7;
                        border-radius: 100px;
                        width: 100%;
                        padding: 0 15px;
                    }
                    input::placeholder{
                        color: #cacaca;
                    }
                    .formlist-btn{
                        position: absolute;
                        width: 100px;
                        right: 0;
                        text-align: center;
                        top: 0;
                        height: 40px;
                        line-height: 40px;
                    }
                    .formlist-btn:after{
                        display : block;
                        width: 1px;
                        content : '';
                        color: #c2c2c2;
                        height 20px;
                        position : absolute;
                        left : 0;
                        top: 50%;
                        margin-top: -10px;
                        background : #c2c2c2;
                    }
                }
            }
        }
        .tisp{
            color: #5979a6;
            font-size: 16px;
            text-align : center;
            padding-top: 50px;
        }
        .btnList{
            li{
                .app-btn{
                    width : 80%;
                    height: 40px;
                    border-radius: 100px;
                    margin : 0 auto;
                    display : block;
                    margin-bottom: 10px;
                    font-size: 14px;
                    background : none;
                }
                .app-btn-login{
                    background : #f48081;
                    color: #fff;
                }
                .app-btn-reg{
                    border: solid 1px #f48081;
                    color: #f48081;
                }
            }
        }
    }
    .defaultImg {
        text-align: center;
        width: 100%;
        margin-bottom: 0.53rem;
        img {
            width: 2.4rem;
            height: 2.4rem;
        }
    }
    .defaultTip {
        margin: 0 auto;
        width: 80%;
        text-align: center;
        span{
            position: relative;
            display: inline-block;
            vertical-align: middle;
            font-size: 16px;
            color: #222222;
            letter-spacing: 5px;
            height: 0.8rem;
            line-height: 0.8rem;
        }
    }
    .loginList{
        .list-item{
            margin-top: 0.4rem;
            text-align: center;
            img{
                width: 5.5rem;
                height: 1.28rem;
            }
        }
    }
}
</style>
